<template>
    <div>
        <!-- 上传图片 -->
        <div style="display:none;">
            <input type="file" id="upload" @change="clipImage($event)"/>
        </div>
        <label for="upload">
            <div class="upload">
                <div><p>选择本地图片</p></div>
            </div>
        </label> 
        <!-- 裁剪图片 -->
        <div class="cropper">
            <VueCropper
                ref="cropper" 
                :img="option.img"
                :canScale='option.canScale'
                :autoCrop='option.autoCrop'
                :info='option.info'
                :fixed='option.fixed'
                :canMove='option.canMove'
                :centerBox='option.centerBox'
                @realTime='realTime'
                >
            </VueCropper>
        </div>
        <div class="preview"><img :src="clipedImage"></div><div class="clear"></div>
        <div><button @click="updateIcon">确定</button>
            <button style="background:white;border:1px solid #c69c6c;color:#c69c6c;" @click="cancel">取消</button></div>
    </div>
</template>

<script>
import {reqUploadIcon,reqUserInfo} from '../../api'
//引入Cropper.js
import { VueCropper }  from 'vue-cropper' 
export default {
    name:"Cropper",
    components:{VueCropper},
    data() {
        return {
            file:'', //裁剪前的数据
            clipedFile:'',//裁剪后的数据
            clipedImage:null,//裁剪后的图片预览
            option:{
                img:'', //裁剪图片的地址
                // outputSize:1, //生成图片的质量-1(0~1)
                // outputType:'jpeg',	//裁剪生成图片的格式-jpg (jpg 需要传入jpeg)	jpeg, png, webp
                info:false, //裁剪框的大小信息-true
                canScale:true,	//图片是否允许滚轮缩放-true
                autoCrop:true, //是否默认生成截图框-false
                // autoCropWidth:180,	//默认生成截图框宽度-容器的 80%	0 ~ max
                // autoCropHeight:180,	//默认生成截图框高度-容器的 80%	0 ~ max
                fixed:true,	//是否开启截图框宽高固定比例-false
                // fixedNumber:1,	//截图框的宽高比例	[1, 1]	[ 宽度 , 高度 ]
                // full:false,	//是否输出原图比例的截图-false
                // fixedBox:false,	//固定截图框大小-不允许改变	false
                canMove:false,	//上传图片是否可以移动-true
                // canMoveBox:true,	//截图框能否拖动-true	
                // original:false,	//上传图片按照原始比例渲染-false	
                centerBox:true,	//截图框是否被限制在图片里面-false	
                // high:true,	//是否按照设备的dpr 输出等比例图片-true	
                // infoTrue:true, //为展示真实输出图片宽高 false 展示看到的截图框宽高	false	
                // maxImgSize:800,	//限制图片最大宽度和高度	2000	0 ~ max
                // enlarge:1,	//图片根据截图框输出比例倍数	1	0 ~ max(建议不要太大不然会卡死的呢)
                // mode:contain	//图片默认渲染方式-contain , cover, 100px, 100% auto
            }
        }
    },
    methods: {
        clipImage(e){ //上传需要裁剪的图片
            this.file = e.target.files[0]
            const reader = new FileReader();
            reader.readAsDataURL(this.file);
            let _this = this
            reader.onload = function () {
                _this.option.img = this.result; 
            }
        },
        realTime (data) { //实时预览
            const that = this
            this.$refs.cropper.getCropBlob(data => {
                // 这里data数据为Blob类型，blobToDataURI方法转换成base64
                this.blobToDataURI(data,function(res){
                // console.log(res)
                that.clipedImage = res
                })
            })
        }, 
        blobToDataURI(blob, callback) {
            const reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onload = function (e) {
                callback(e.target.result); //url地址
            }
        },
        async updateIcon(){ //上传后台
            this.$refs.cropper.getCropBlob(blob=>{
                this.clipedFile = blob //文件的blob信息
            }) 
            const token = this.$local.get('key')
            const formData = new FormData()
            formData.append('file',this.clipedFile) //图片信息
            formData.append('token',token) //用户信息
            const icon = await reqUploadIcon(formData)
            if (icon.state === 'suc') {
                this.$message.success('修改头像成功，数据可能有延迟，请刷新！')
                // 通知store改变弹出层状态
                this.$store.commit('closePopuper')
                setTimeout(() => {
                    this.$router.go(0)
                }, 2000);
            }else{
                this.$message.error('修改头像失败,请稍后或刷新重试！')
            }
        },
        cancel(){
            // 通知store改变弹出层状态
            this.$store.commit('closePopuper')
        }
    }
}
</script>

<style scoped>
button{
    float: right;
    margin-left: 10px;
}
/* 文件上传 */
.upload {
  cursor: pointer;
  height: 30px;
}
.upload>div{
    width: 100%;
    height: 100%;
    border: 1px dashed #606266;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ccc;
    position: relative;
    overflow: hidden;
}
.upload>div>div{
  position: absolute;
  margin: 0 auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.upload>div:hover{
  border: 1px dashed #c69c6c;
}
.upload>div>p{
    font-size: 16px;
    color: #606266;
}
.upload>div>p:hover{
    color: #c69c6c;
}
.cropper{
    width: 320px;
    height: 320px;
    border: 1px solid #c69c6c;
    margin: 10px 10px 10px 0;
    border-radius: 4px;
    float: left;
}
.cropper img{
    display: block;
    max-width: 100%;
}
.preview{
    width: 145px;
    height: 145px;
    border-radius: 4px;
    border: 1px solid #c69c6c;
    float: left;
    margin-top: 10px;
}
</style>